<template>
	<div>
		<section>
			<section class="choice-teach-week" >
				<section style="width: 100%; height: 100%;" @click="toggleWeek()">
					第{{currentWeek}}周
					<mu-icon style="position: absolute;left: 6.4rem;top:0.75rem;"  value="keyboard_arrow_down" />	
				</section>
				
				<section v-show="isWeek" class="selectDown"  style="width: 8rem; height:10rem; overflow:hidden;position: relative;left: 0;top: -2px;line-height: 2.2rem; z-index: 204; background: #fff; font-size: 1.1rem; display: flex;flex-direction: column;overflow-y:scroll">
					<span v-for="item in teachWeek" style="color: #505050;" @click="changeWeek(item)">
						第{{item}}周
					</span>
				</section>
			</section>
			<section class="schedule-top-title" >
				<span class="currentDatestyle center-mid">
					<a>星期</a>
					<a>{{correctDate(currentMonth)}}月</a>
				</span>
				<section  v-for="(item,index) in checkWeekDate" style=" flex: 1; position: relative;" class="center-mid">
					<span :class="(index+1)==getRightDay(new Date().getDay())?'currentBorder':'noBorder'" style="display: flex; flex-direction: column; width: 90%;height: 100%; margin: 0 auto;" class="center-mid">
						<a :class="(index+1)==getRightDay(new Date().getDay())?'currentDateBg':'noToday'">{{turnCapital(index)}}</a>
						<a :class="(index+1)==getRightDay(new Date().getDay())?'currentDateBg':'noToday'">{{correctDate(item.courseDate.slice(8))}}</a>
					</span>
				</section>
				
			</section>
			<section class="schedule-table-list" style="display: flex; margin-top: 6.6rem;position: relative;">
				<section class="schedule-table-left" style="flex: 1;">
					<ul class="schedule-left-time center-mid" v-for="(item,index) in classTimeTable">
						<span style="color:#505050; font-size: 1rem;">{{item.courseIndex}}</span>
						<span style="color:#a3a3a3 ;">{{item.start}}</span>
					</ul>
				</section>
					<ul  class="schedule-column"  v-for="itemS in studyDay">
						<li v-for="(itemT,indexT) in classTimeTable" class="schedule-border"> 
							<!--<section style="position: relative; background: salmon; width: 100%; height: 2rem;left: 0; top: 0;" v-for="(itemB,indexB) in bigJSON">
								{{indexB}}
							</section>-->
						</li>
						
					</ul>
					<section class="schedule-up"  >
						<section style="flex: 1;"></section>
						<ul v-for="(itemB,indexB) in scheduleInfo" style="display: flex;flex: 1; flex-direction:column; position: relative;">
							<li v-for="(itemC,indexC) in itemB" @click="open(itemC)" :style="getCellBg(indexB+1,itemC)" class="schedule-up-cell" >
								<span>{{itemC.courseName}}</span>
								<!--<span>{{IsOpeAtt(itemC.courseDiaryState)}}</span>
								<span>{{IsOpeDiary(itemC.isAttendance)}}</span>-->
								<section class="PromptCorner" v-show="isOpeCircleShow(itemC,indexB)">{{IsOperation(itemC)}}</section>
							</li>
						</ul>
					</section>
			
				<!--<ul  class="schedule-column"  v-for="itemS in studyDay">
					<li v-for="(itemT,indexT) in timeTable" class="schedule-border" >
						<section v-for="(itemD,indexD) in orderWeekData[itemS]" >
							<section v-show="itemD.DJJ==indexT+1" class="schedule-cell"  :class="itemD.SKCD==2?'twoTimeHeight':'oneTimeHeight'">
								<section @click="open(itemD)" style="width: 100%; height: 100%; box-sizing: border-box; padding: 2px;border-radius: 3px;" :style="getCellBg(itemS,indexT+1)">
									{{itemD.KCMC}}
								</section>
							</section>
							
						</section>
					</li>
				</ul>-->
				
				<mu-dialog :open="dialog" title="" style="background-color: salmon;">
					<section class="popInfo-container"  style="display: flex;flex-direction: column; justify-content: center;">
						<section class="pop-sec">
							<span style="display: flex;align-items: center;">
								<mu-icon class="new-icon"  value="description" color="blue" />
							</span>
							<!--<span>
								{{classDetailInfo.DJJ+'-'+(parseInt(classDetailInfo.DJJ)+parseInt(classDetailInfo.SKCD)-1)}}节
							</span>-->
							<span>{{classDetailInfo.courseWhichIndex+'-'+(parseInt(classDetailInfo.courseWhichIndex)+1)}}节</span>
						</section>
						<section class="pop-sec">
							<span style="display: flex;align-items: center;">
								<mu-icon class="new-icon"  value="receipt" color="blueGrey500" />
							</span>
							
							<span>{{classDetailInfo.courseName}}</span>
						</section>
						<section class="pop-sec">
							<mu-icon class="new-icon"  value="room" color="green500" />
							<span>{{fillInfo(classDetailInfo.courseClassroomPosition)}}</span>
						</section>
						<section class="pop-sec">
							<mu-icon class="new-icon"  value="perm_identity" color="orange700" />
							<span>{{classDetailInfo.courseTeacherName}}</span>
						</section>
						<section class="pop-sec" @click="queryAddress('AttendanceWad',classDetailInfo)">
							<mu-icon class="new-icon"  value="assignment_turned_in" color="orange700" />
							<span>{{IsOpeAtt(classDetailInfo.courseDiaryState)}}</span>
						</section>
						<section class="pop-sec">
							<mu-icon class="new-icon"  value="alarm_on" color="orange700" />
							<span>{{IsOpeDiary(classDetailInfo.isAttendance)}}</span>
						</section>
					</section>
			    	<mu-flat-button slot="actions" primary @click="close()" label="确定"/>
			  	</mu-dialog>

				<!--<ul class="weekend" >
					<li v-for="(itemT,indexT) in timeTable" >
						
					</li>
				</ul>
				<ul class="weekend" >
					<li v-for="(itemT,indexT) in timeTable" >
						
					</li>
				</ul>-->
				
			</section>
		</section>
		<div v-show="isTimeTable||isTopInfo||isSchedule" class="" style="width: 100%;height: 100%; position:fixed;left:0;top:0;background-color: rgba(0,0,0,0.1);display: flex;justify-content: center;align-items: center;z-index: 350;">
			<mu-circular-progress :size="24" color="green500"/>
		</div>
	</div>
</template>

<script>
//import store from '../store/store'
export default {
	data(){
		return{
			currentWeek: '',
			mainData:[],
			thisDate:[],
			mainWeekData:[],
			allParameters:{},
			userIdentity:'',
		    userInfo:{},
//		    month:'',
//		    weekDay:'',
//		    currentYear:'',
//		    studyYear:'',
		    timeTable:[],
		    orderWeekData:{
		    	'1':[],
		    	'2':[],
		    	'3':[],
		    	'4':[],
		    	'5':[]
		    },
		    oneweekDay:['一','二','三','四','五','六','日'],
		    studyDay:['1','2','3','4','5','6','7'],
		    dialog:false,
		    classDetailInfo:{},
		    totalWeeks:[],
		    isWeek:false,
		    monthDays:{},
		    scheduleInfo:{},
			classTimeTable:{},
		    teachWeek:[],
		    valWeek:'',
		    checkWeekDate:{},
		    currentMonth:'',
		    bgColorTable:[
		    	'background-color: #8ba2ff',
				'background-color: #92d760',
				'background-color: #ff9899',
				'background-color: #73be3d',
				'background-color: #f4a4df',
				'background-color: #57ee8d',
				'background-color: #30c1f0',
				'background-color: #f66e72',
				'background-color: #88a8ff',
				'background-color: #3ba7e5',
				'background-color: #dd8e3f',
				'background-color: #ec5d61',
				'background-color: #00b45d',
				'background-color: #3f9dd1',
				'background-color: #30f0ce',
				'background-color: #30c1f0',
				'background-color: #f65d5d',
				'background-color: #f170d7',
				'background-color: #93d4fc',
				'background-color: #88a4ff',
		    ],
		    isTimeTable:true,
		    isTopInfo:true,
		    isSchedule:true,
		    isOpeCircle:true,
		    currentFullDate:''
		}
	},
	mounted(){
		let that=this
		this.variousTime()
		this.currentMonth=new Date().getMonth()+1
		this.currentWeek=this.$route.query.teachWeek
		this.changeWeekClass(this.currentWeek)
		this.getTopWeek(this.currentWeek)
		this.getTimeTable()
//		var allMonth=[['1','3','5','7','8','10','12'],['4','6','9','11'],['2']]
		
		this.todayDate()
//		this.setRightDays(allMonth,new Date().getFullYear())
        if(localStorage.userInfo!=null){
           that.userInfo = JSON.parse(localStorage.userInfo)
        }
        this.getTeachWeek()
	},
	computed:{
		url: function() {
            return '/gleenSoft-base/jxkh/jxrl/dayClassBy'+this.userIdentity;
        }
	},
	methods: {
		IsOperation(val){
			var n=0
			if(val.courseDiaryState==0){
				n++
			}
			if(val.isAttendance==0){
				n++
			}
			
			return n
		},
		isOpeCircleShow(val,Val2){
			var myDate = new Date();
			var currToday=myDate.getDay()
			var d1=new Date(val.currentDate.replace(/\-/g, "\/"))
			var d2=new Date(this.currentFullDate.replace(/\-/g, "\/"))
			if(d1>d2){
				return false
			}else{
				if(val.courseDiaryState!=0 && val.isAttendance!=0){
					return false
				}else{
					return true
				}
			}
			
		},
		IsOpeAtt(val){
			if(val==0){
				return '未做考勤'
			}else{
				return '已做考勤'
			}
		},
		IsOpeDiary(val){
			if(val==0){
				return '未做日志'
			}else{
				return '已做日志'
			}
		},
		dealScheuleColor(val){
			var ReaptArr=[]
			
			var noReaptColor={}
			for(var i in val){
				for(var j in val[i]){
					ReaptArr.push(val[i][j].classCourseId)					
				}
			}
			var noReaptArr=[]
			for(var i in ReaptArr){
				if(noReaptArr.indexOf(ReaptArr[i])==-1){
					noReaptArr.push(ReaptArr[i])
//					console.info(ReaptArr[i])
				}
			}
//			console.info(noReaptArr)
//			var n=0
//			for(var i in noReaptColor){
//				n++
//				
//			}
		},
		getTopWeek(val){
			let that=this
			that.axios.post('/iyx/courseDate/getDaysByTermAndWeek',{
				"year":that.$route.query.academic,
				"term":that.$route.query.semester,
				"week":val.toString()
			}).then(function(response){
				that.checkWeekDate=response.data.date
				that.currentMonth=that.checkWeekDate[0].courseDate.slice(5,7)
				that.isTopInfo=false
			}).catch(function(error){
				
			})
		},
		getTimeTable(){
			let that=this
			that.axios.get('/iyx/schedule/SelectAll').then(function(response){
				that.classTimeTable=response.data
				that.isTimeTable=false
			}).catch(function(error){
				
			})
		},
		correctDate(val){
			val=val.toString()
			if(val.slice(0,1)=='0'){
				val=val.slice(1)
			}
			return val
		},
		turnCapital(val){
			return this.oneweekDay[val]
		},
		getTeachWeek(){
			for(var i=0;i<22;i++){
				this.teachWeek.push(i+1)
			}
		},
		fillInfo(data){
			if(data==''){
				return '上课地点另行通知'
			}else{
				return data
			}
		},
		handleChange(val){
		},
//		getOneWeekClass(){
//			let that = this
//			that.axios.get('').then(function (response) {
//	      		console.info('---------')
//	      		
//	      		console.info(that.bigJSON)
//	      	}).catch(function (error) {
//	      		
//	        	console.log(error);
//	      	});
//		},
		changeWeekClass(data){
			let that = this
			that.axios.post('/iyx/course/'+localStorage.classId+'/ClassWeekCourse?token='+localStorage.token,{
				   "courseAcademicYear": that.$route.query.academic,
				   "courseAcademicTerm": that.$route.query.semester,
				   "courseWhichWeek": data
			}).then(function (response) {
	      		that.scheduleInfo=response.data
				that.isSchedule=false
	      		that.dealScheuleColor(that.scheduleInfo)
	      		
	      	}).catch(function (error) {
	      		
	        	console.log(error);
	      	});
		},
		loadParams(){
			let that = this
			that.axios.get('/iyx/course/ClassCourse').then(function (response) {
//	        	that.allParameters=response.data.result
				that.bigJSON=response.data
//	        	let kxrq = new Date() - new Date(that.allParameters.KXRQ)
//	        	that.currentWeek=Math.floor(kxrq/1000/3600/24/7)+1
//	        	console.info(that.currentWeek)
//	        	console.info(that.allParameters.JXZZS)
//	        	that.getAllWeeks(Number(that.allParameters.JXZZS))
//				that.getData(that.allParameters)
	      	}).catch(function (error) {
	      		
	        	console.log(error);
	      	});
	      	
		},
		getEveryday(weekArry){
			for(var index in weekArry){
				this.weekDate(Number(index)+1)
			}
		},
		gotoAddress(path){
			var self=this
			setTimeout(function(){
				self.$router.push(path)
			},200)
	    },
	    queryAddress(path,queryData){
	      	this.$router.push({
		        path:path,
				query:queryData
	      	})
	    },
		getData(data){
			var tempTimetable=[]
			for(var item in data){
				if(item.match("_start")=="_start"&&item.match("roll")!="roll"){
					tempTimetable.push(data[item].substring(0,5))
				}
			}
			this.timeTable=tempTimetable.sort()
		},
		loadWeekClass(everyDate){
			let that = this
			that.axios.get(that.url+'?date='+everyDate).then(function (response) {
//				console.info(':'+everyDate)
        		if(response.data.result.length>0){
		        	that.mainData=response.data.result
		        	var aWeekDay=that.mainData[0].XQJ
//		        	that.mainWeekData.push(that.mainData)
//		        	that.thisDate.push(everyDate)
					that.orderWeekData[aWeekDay]=that.mainData
//					that.getMainData(that.mainWeekData)
	        	}
      		}).catch(function (error) {
        		console.log(error);
      		});
		},
		variousTime(){
	    	var thisDate=new Date()
			var currentYear=thisDate.getFullYear()
		  	var mon=this.correcTime(thisDate.getMonth()+1)       
		  	var toDate=this.correcTime(thisDate.getDate())
		  	var currentHour=this.correcTime(thisDate.getHours()) 
		  	var currentMinutes=this.correcTime(thisDate.getMinutes())
//			this.currentmonth=mon+'-'+toDate
//		  	this.currentTime=currentHour+':'+currentMinutes
		  	this.currentFullDate=currentYear+'-'+mon+'-'+toDate
    	},
    	correcTime(data){
	    	if(data<10){
	    		data='0'+data
	    	}
	    	return data
	    },
		weekDate(data){
			var myDate=new Date()
			var currentYear=myDate.getFullYear()
			var currentMouth=myDate.getMonth()+1
			var currentDate=myDate.getDate()
			
//			if(data==myDate.getDay()){
//				
//	      	}else if(data!=myDate.getDay()){
//	      		
//	      	}
			if(myDate.getDay()==0){
				var currentDay=7
				
			}else if(myDate.getDay()!=0){
				var currentDay=myDate.getDay()
			}
			currentDate=currentDate+(data-currentDay)
	      	
	      	if(currentMouth<10){
				currentMouth='0'+currentMouth
			}
			if(currentDate<10){
				currentDate='0'+currentDate
			}
			
			var fullDate=currentYear+'-'+currentMouth+'-'+currentDate
//			this.loadWeekClass(fullDate)
		},
		weekDateChange(data,changeVal){
			var myDate=new Date()
			var currentYear=myDate.getFullYear()
			var currentMouth=myDate.getMonth()+1
			var currentDate=myDate.getDate()
			var currentDay=myDate.getDay()
			if(myDate.getDay()==0){
				currentDay=7
			}
//			if(data==myDate.getDay()){
//				
//	      	}else if(data!=myDate.getDay()){
//	      		
//	      	}
	      	currentDate=currentDate+(data-currentDay)
	      	if(currentMouth<10){
				currentMouth='0'+currentMouth
			}
			if(currentDate<10){
				currentDate='0'+currentDate
			}
			var fullDate=currentYear+'-'+currentMouth+'-'+(currentDate+changeVal)
//			this.loadWeekClass(fullDate)
		},
		
		getFitArr(data){
			var myDate=new Date()
			data=data+(data-myDate.getDate())
			return data
		},
		getCellBg(data1,val){
			var cellBgcolorJson={
				'11':'background-color: #8ba2ff',
				'13':'background-color: #92d760',
				'15':'background-color: #ff9899',
				'17':'background-color: #73be3d',
				'19':'background-color: #30f0ce',
				'111':'background-color: #93d4fc',
				'21':'background-color: #f4a4df',
				'23':'background-color: #57ee8d',
				'25':'background-color: #30c1f0',
				'27':'background-color: #f66e72',
				'29':'background-color: #8ba2ff',
				'211':'background-color: #88a4ff',
				'31':'background-color: #88a8ff',
				'33':'background-color: #3ba7e5',
				'35':'background-color: #dd8e3f',
				'37':'background-color: #ec5d61',
				'39':'background-color: #ff9899',
				'311':'background-color: #73be3d',
				'41':'background-color: #00b45d',
				'43':'background-color: #3f9dd1',
				'45':'background-color: #30f0ce',
				'47':'background-color: #30c1f0',
				'49':'background-color: #f66e72',
				'411':'background-color: #dd8e3f',
				'51':'background-color: #f65d5d',
				'53':'background-color: #f170d7',
				'55':'background-color: #93d4fc',
				'57':'background-color: #88a4ff',
				'59':'background-color: #3ba7e5',
				'511':'background-color: #ec5d61',
				
			}
			for(var i in cellBgcolorJson){
				cellBgcolorJson[i]=cellBgcolorJson[i]+';'+'top:'+(val.courseWhichIndex-1)*4.2+'rem'
			}
			var cellIndex=''+data1+val.courseWhichIndex
			return cellBgcolorJson[cellIndex]
			
		},
		todayDate(data){
	      	var myDate=new Date()
	      	var mon=myDate.getMonth()+1
	      	var toDate=myDate.getDate()
	      	var currentDay=myDate.getDay()
	      	if(myDate.getDay()==0){
	      		currentDay=7
	      	}
	      	if(mon<10){
	      		mon='0'+mon
	      	}
			toDate=toDate+(data-currentDay)
			return toDate
	    },
	    open (data) {
//	      this.dialogTable[''+data1+data2] = true
		  this.dialog=true
		  this.classDetailInfo=data
		  console.info(data)
	    },
	    close () {
	      this.dialog = false
	    },
	    toggleWeek(){
	    	this.isWeek=!this.isWeek
	    },
	    getAllWeeks(data){
	    	for(var i=0;i<data;i++){
	    		this.totalWeeks.push(i+1)
	    	}
//	    	console.info(this.totalWeeks)
	    },
	    changeWeek(data){
	    	this.currentWeek=data
	    	let that=this
	    	setTimeout(function(){
	    		that.isWeek=false
	    		that.getTopWeek(data)
	    		that.changeWeekClass(that.currentWeek)
	    		
	    	},500)
	    	
	    },
	    getRightDay(data){
	    	if(data==0){
	    		data=7
	    	}
	    	return data
	    },
	    setRightDays(arr,yearNature){
	    	for(var i in arr){
	    		for(var j in arr[i]){
	    			if(arr[i].length==7){
	    				this.monthDays[''+ arr[i][j]]=31
	    			}else if(arr[i].length==4){
	    				this.monthDays[''+ arr[i][j]]=30
	    			}else if(arr[i].length==1){
	    				if(yearNature%4==0){
	    					this.monthDays[''+ arr[i][j]]=29
	    				}else{
	    					this.monthDays[''+ arr[i][j]]=28
	    				}
	    				
	    			}
	    			
	    		}
	    	}
	    }
	    
	},
	watch:{
//		currentWeek(val1,Val2) {
//			var dVal=val1-Val2
//			console.info(dVal*7)
//			for(var index in this.oneweekDay){
//				this.weekDateChange(Number(index)+1,dVal*7)
//			}
//		}
	}
}
</script>

<style scoped>
.PromptCorner{
	position: absolute;
	width:14px;
	height:14px;
	line-height: 14px;
	background-color: red;
	right:-4px;
	top: -2px;
	border-radius:50%;
	font-size: 10px;
	z-index: 180;
	text-align: center;
}
ul li{
	list-style: none;
}
ul,li{
	margin: 0;
	padding: 0;
}
.info-block{
	height: 4rem;
	flex: 1;
	display: flex;
}
.selectDown{
	box-shadow: 0 2px 3px rgba(170,170,170,0.3);
}
.schedule-up{
	position: absolute; 
	width: 100%; 
	display: flex;
	flex-direction: row; 
	top: 0;
	left:0;
}
.schedule-up-cell{
	display: flex; 
	flex-direction:column; 
	height:8.4rem; 
	width: 100%;
	box-sizing: border-box;
	border: 2px solid #fff; 
	border-radius: 5px; 
	font-size: 0.75rem; 
	color: #fff; 
	text-align: center;
	position: absolute;
}
.schedule-table-content{
	flex: 7;
	display: flex; 
	flex-direction:column;
	border-bottom: 1px solid #efefef;
	background: #fff;
}
.schedule-table-content span:nth-child(2n-1){
	background-color: seashell;
}
.schedule-table-content span:nth-child(2n){
	background-color:skyblue
}
.schedule-left-time{
	display: flex; 
	height: 4.2rem; 
	width: 100%; 
	flex-direction: column;
	border-bottom: 1px solid #e5e5e5;
	background-color: #f2f2f2;
	/*background-color: #e4f1f9;*/
}
.schedule-top-title{
	flex-direction: row;
	width: 100%; 
	height: 3.6rem; 
	background:#e7e7e7 ; 
	/*margin-top: 3rem;*/ 
	/*background-color: #d3e8f5;*/
	display: flex;
	position: fixed;
	left: 0;
	top: 3rem;
	z-index: 200;
	box-shadow: 0 2px 4px rgba(202,202,202,0.2);
}
.schedule-top-title span{
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
}
.schedule-bg-border{
	height: 4.2rem;
	width: 100%;
	border-bottom: 1px solid #e5e5e5;
}
/*.schedule-top-title a{
	/*color: #000;*/
/*}*/
.currentDatestyle{
	/*color:#12b8ec;*/
	font-size: 1rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	position: relative;
}
.currentDatestyle a{
	font-size: 1rem;
	/*color:#8eacf4;*/
	/*color:#9acef6;*/
	color: #a3a3a3;
}
.currentDateBg{
	color: #fff;
}
.noToday{
	color:#a3a3a3;
	font-size: 0.9rem;
}
.currentBorder{
	box-sizing: border-box;
	/*border-bottom: 4px solid #12b8ec;*/
	background-color:#9acef6 ;
	/*background-color:#8eacf4 ;*/
}
.noBorder{
	box-sizing: border-box;
	/*border-bottom:none;*/
}
.oneTimeHeight{
	height: 4.2rem;
	/*margin-top:0.1rem;*/
}
.twoTimeHeight{
	height: 8.4rem;
	position: relative;
	/*top:0.2rem*/
}
.weekend{
	flex: 1;
	background-color: #fff; 
	position: relative; 
	flex-direction:column; 
}
.weekend li{
	height: 4.2rem;
	width: 100%;
	/*border-bottom: 1px solid #e5e5e5;*/
	background-color: #fff;
}
.schedule-cell{
	/*width: 90%;*/
	width: 100%;
	display:block;
	position: relative;
	z-index: 180; 
	/*background-color: #a0a0a0;*/
	color: #fff; 
	word-break:break-all;
	/*margin: 0 5%;*/
	box-sizing: border-box;
	padding: 1px;
	font-size: 0.78rem;
}
.schedule-column{
	flex: 1;
	background-color: #fff; 
	position: relative; 
	flex-direction:column;
	/*border-right: 1px solid red;*/
}
.schedule-border{
	height: 4.2rem;
	width: 100%;
	/*border-bottom: 1px solid #e5e5e5;*/
	background-color: #fff;
}
.popInfo-container span{
	line-height: 2.4rem;
}
.pop-sec{
	width: 100%; 
	display: flex; 
	flex-direction: row; 
	align-items: center;
}
.pop-sec span:nth-child(1){
	flex: 1;
}
.pop-sec span:nth-child(2){
	text-indent: 0.4rem;
	flex: 8;
	font-size: 0.9rem;
}
.choice-teach-week{
	position: fixed;
	height: 3rem; 
	width:8rem;
	left: 0; 
	top: 0; 
	z-index: 203;
	left: 50%; 
	margin-left: -4rem;
	text-align: center;
	line-height: 3rem;
	font-size: 1.2rem;
	letter-spacing: 6px;
}
</style>